<template>
	<gui-page :customHeader="true">
		<!-- 自定义头部导航 -->
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<gui-header-leading :onlyBack="true"></gui-header-leading>
				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">登录授权</text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="demo_body">
			<view>
				<view class="height-50"></view>
				<view class="fx-f fx-f-ajc gui-margin-top">
					<!-- <image class="gui-list-image" src="/static/images/timg.png"></image> -->
					<gui-image src="/static/images/timg.png" :width="170" :height="170" borderRadius="50rpx"></gui-image>
					<!-- <graceImg src="/static/images/timg.png" :width="170" :height="170"></graceImg> -->
				</view>
				<view class="height-50"></view>
				<view v-show="showStatus">
					<view class="mx-5 height-450">
						<view style="border-bottom: 1px solid #ccc;"></view>
						<view class="ml-2 mt-4">申请获取以下权限：</view>
						<view class="ml-2 mt-2" style="color: #ccc;">获得你的公开信息(昵称，头像等)</view>
					</view>
					<view class="mx-5">

						<button type="primary" class="gui-button btc-tbr-large logo-btn" @tap="getUserInfoWx">获取授权并登录</button>

					</view>
				</view>
				<view v-show="!showStatus">
					<view class="mx-5 height-450">
						<view style="border-bottom: 1px solid #ccc;"></view>
						<view class="ml-2 mt-4">申请获取以下权限：</view>
						<view class="ml-2 mt-2" style="color: #ccc;">获得你微信绑定的手机号码</view>
					</view>
					<view class="mx-5">
						<button type="primary" class="gui-button btc-tbr-large logo-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						 withCredentials="true">手机号一键登录/注册</button>
					</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>
<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex';

	import guiPage from '@/components/guiCom/gui-page.vue';
	var WXBizDataCrypt = require('@/lib/WXBizDataCrypt.js')
	export default {
		data() {
			return {
				// 用户头像 与 名字
				nickName: '',
				avatarUrl: '',
				showStatus: true,
			}
		},
		onLoad: function() {

		},
		methods: {
			...mapMutations(['setCodeQuery', 'setUserPhone', 'login']),
			...mapActions(['getUserInfo']),
			goback: function() {
				uni.navigateBack({});
			},
			gohome: function() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			getUserInfoWx: function(e) {

				// #ifdef MP-WEIXIN
				let _this = this;
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {

							wx.getUserProfile({
								desc: '完善会员资料',
								lang: 'zh_CN',
								success: function(res) {
									console.log('wx.getUserProfile=>用户允许了授权');
									console.log(res);
									_this.showStatus = false;
									_this.nickName = res.userInfo.nickName;
									_this.avatarUrl = res.userInfo.avatarUrl;
								},
								fail: function(res) {
									console.log('wx.getUserProfile=>用户拒绝了授权');
									console.log(res);
									uni.showToast({
										title: "请点击授权！",
										icon: "none"
									});

								},
							});
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					},
				})
				//#endif
			},
			async getPhoneNumber(e) {

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let _this = this;
					// 获取用户 openid
					uni.login({
						provider: 'weixin',
						success: (res) => {
							_this.$HTTP.post('/app/user/openid', {
								code: res.code
							}).then((data) => {
								// 保存用户 openid 
								_this.setCodeQuery(data.data)
								var pc = new WXBizDataCrypt('wxb2c53a4f9f7ed2df', data.data.session_key)
								var phoneInfo = pc.decryptData(e.detail.encryptedData, e.detail.iv)
								// 保存用户手机号码
								_this.setUserPhone(phoneInfo.phoneNumber)
								// 登录及注册
								_this.$HTTP.post('/app/user/wxRegister', {
									openid: data.data.openid,
									username: _this.nickName,
									avatar: _this.avatarUrl,
									phone: phoneInfo.phoneNumber,
								}).then((authorRes) => {
									_this.login(authorRes.data)
									// 获取用户信息
									_this.getUserInfo();
									// 登录震动
									uni.vibrateLong();
									// 页面跳转到首页
									uni.navigateTo({
										url: '/pages/switchPages/index?index=2'
									});
								})

							});
						},
					})

				} else {
					uni.showToast({
						title: '已取消快捷登录',
						icon: "none"
					});
				}
			},
		},
		components: {
			guiPage
		}
	}
</script>
<style scoped>
	.logo-btn {
		background: #fb7e22;
		border: none;
		font-size: 30rpx;
		color: #ffffff;
	}
</style>
